<template>
  <tabbar class="my-tabbar">
    <tabbar-item v-if="UserType !== '5'" :selected="selectIndex===0" link="/main/home">
      <img slot="icon" src="../assets/home.png">
      <img slot="icon-active" src="../assets/home-active.png">
      <span slot="label">一拼通</span>
    </tabbar-item>
    <tabbar-item :selected="selectIndex===1" link="/main/order/bussinessOrder">
      <img slot="icon" src="../assets/order.png">
      <img slot="icon-active" src="../assets/order-active.png">
      <span slot="label">订单</span>
    </tabbar-item>
    <tabbar-item v-if="UserType !== '5'" :selected="selectIndex===4" link="/main/publishOrder">
      <img slot="icon" src="../assets/ship.png">
      <img slot="icon-active" src="../assets/ship-active.png">
      <span slot="label">发货</span>
    </tabbar-item>
    <tabbar-item :selected="selectIndex===2" :badge="contactBadge?contactBadge.toString():null" link="/main/contact">
      <img slot="icon" src="../assets/contact.png">
      <img slot="icon-active" src="../assets/contact-active.png">
      <span slot="label">联系人</span>
    </tabbar-item>
    <tabbar-item :selected="selectIndex===3" link="/main/my">
      <img slot="icon" src="../assets/my.png">
      <img slot="icon-active" src="../assets/my-active.png">
      <span slot="label">我的</span>
    </tabbar-item>
  </tabbar>
</template>

<script>
import {
  Tabbar,
  TabbarItem
} from 'vux'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'myTabbar',
  components: {
    Tabbar,
    TabbarItem
  },
  data () {
    return {
      selectIndex: 0
    }
  },
  created () {
    switch (this.$router.currentRoute.name) {
      case 'home':
        this.selectIndex = 0
        break
      case 'bussinessOrder':
        this.selectIndex = 1
        break
      case 'contact':
        this.selectIndex = 2
        break
      case 'publishOrder':
        this.selectIndex = 4
        break
      case 'my':
        this.selectIndex = 3
        break
      default:
        this.selectIndex = 0
    }
  },
  computed: {
    ...mapState({
      tabbarItemIndex: state => state.app.tabbarItemIndex,
      contactBadge: state => state.chat.contactBadge,
      UserType: state => state.user.UserType
    })
  },
  methods: {
    ...mapMutations({
      tabbarItemIndexChange: 'app/tabbarItemIndexChange'
    })
  }
}
</script>

<style lang="less">
.my-tabbar{
  position: fixed !important;
  .publish-order{
    position: relative;
    .weui-tabbar__icon{
      position: absolute;
      width: 60px;
      height: 60px;
      background: #F7F7FA;
      border-radius: 50%;
      left: 50%;
      margin-left: -25px;
      top: -30px;
      border: 1px solid #C0BFC4;
      border-bottom-color: #F7F7FA;
      img{
        width: 32px;
        height: 32px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0 0 0 -16px;
      }
    }
    .weui-tabbar__label{
      width: 100%;
      position: absolute;
      bottom: 0;
    }
  }
}
</style>
